<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - AI智能改写</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="js/uni.webview.js"></script>
    <style>
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        .user-avatar {
            width: 120px;
            height: 120px;
            object-fit: cover;
        }
        .chart-container {
            height: 300px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 导航栏 -->
        <nav class="bg-white shadow-md w-full">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <a href="index.html" class="text-2xl font-bold gradient-text">AI智能改写</a>
                        </div>
                        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                            <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">首页</a>
                            <a href="main.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">开始使用</a>
                            <a href="profile.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">个人中心</a>
                        </div>
                    </div>
                    <div class="hidden sm:ml-6 sm:flex sm:items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-500 mr-2">剩余Token: <span class="text-indigo-600 font-medium">1250</span></span>
                            <el-tooltip content="购买更多Token" placement="bottom">
                                <a href="recharge.html" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                                    <i class="fas fa-plus-circle"></i> 充值
                                </a>
                            </el-tooltip>
                        </div>
                        <div class="ml-4 relative flex-shrink-0">
                            <div>
                                <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="用户头像">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主体内容区 -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid grid-cols-12 gap-8">
                <!-- 左侧用户信息 -->
                <div class="col-span-4">
                    <div class="bg-white shadow-sm rounded-lg overflow-hidden">
                        <div class="p-6 text-center">
                            <div class="flex justify-center">
                                <img class="user-avatar rounded-full border-4 border-indigo-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="用户头像">
                            </div>
                            <h2 class="mt-4 text-xl font-bold text-gray-900">张三</h2>
                            <p class="text-gray-500">学生用户</p>
                            <div class="mt-4 flex justify-center space-x-2">
                                <el-button type="primary" size="small" class="gradient-bg">编辑资料</el-button>
                                <el-button size="small">修改密码</el-button>
                            </div>
                        </div>
                        <div class="border-t border-gray-200 p-4">
                            <h3 class="text-lg font-medium text-gray-900 mb-3">账户信息</h3>
                            <div class="space-y-3 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">注册时间</span>
                                    <span class="text-gray-900">2023-05-20</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">会员等级</span>
                                    <span class="text-indigo-600 font-medium">普通会员</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">剩余Token</span>
                                    <span class="text-indigo-600 font-medium">1250</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">累计使用</span>
                                    <span class="text-gray-900">10350 Token</span>
                                </div>
                            </div>
                        </div>
                        <div class="border-t border-gray-200 p-4">
                            <div class="flex justify-between items-center mb-3">
                                <h3 class="text-lg font-medium text-gray-900">快速充值</h3>
                                <a href="recharge.html" class="text-sm text-indigo-600 hover:text-indigo-800">查看更多套餐</a>
                            </div>
                            <div class="grid grid-cols-2 gap-3 mb-4">
                                <div class="border border-indigo-100 rounded-lg p-3 text-center cursor-pointer hover:border-indigo-500 hover:bg-indigo-50">
                                    <p class="text-lg font-bold text-gray-900">￥39.9</p>
                                    <p class="text-sm text-gray-500">5000 Token</p>
                                </div>
                                <div class="border border-indigo-100 rounded-lg p-3 text-center cursor-pointer hover:border-indigo-500 hover:bg-indigo-50">
                                    <p class="text-lg font-bold text-gray-900">￥69.9</p>
                                    <p class="text-sm text-gray-500">10000 Token</p>
                                </div>
                                <div class="border border-indigo-100 rounded-lg p-3 text-center cursor-pointer hover:border-indigo-500 hover:bg-indigo-50">
                                    <p class="text-lg font-bold text-gray-900">￥99.9</p>
                                    <p class="text-sm text-gray-500">15000 Token</p>
                                </div>
                                <div class="border border-indigo-100 rounded-lg p-3 text-center cursor-pointer hover:border-indigo-500 hover:bg-indigo-50">
                                    <p class="text-lg font-bold text-gray-900">￥129.9</p>
                                    <p class="text-sm text-gray-500">20000 Token</p>
                                </div>
                            </div>
                            <el-button type="primary" class="w-full gradient-bg">立即充值</el-button>
                        </div>
                    </div>
                </div>

                <!-- 右侧内容区 -->
                <div class="col-span-8">
                    <!-- 选项卡 -->
                    <el-tabs>
                        <el-tab-pane label="Token消耗" name="token">
                            <div class="bg-white shadow-sm rounded-lg overflow-hidden p-6">
                                <div class="mb-6">
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">Token使用趋势</h3>
                                    <div class="text-sm text-gray-500 mb-4">过去30天Token消耗情况</div>
                                    <div id="tokenChart" class="chart-container"></div>
                                </div>
                                
                                <div>
                                    <div class="flex justify-between items-center mb-4">
                                        <h3 class="text-lg font-medium text-gray-900">消费记录</h3>
                                        <el-select v-model="timeRange" placeholder="时间范围" size="small">
                                            <el-option label="最近7天" value="7"></el-option>
                                            <el-option label="最近30天" value="30"></el-option>
                                            <el-option label="最近90天" value="90"></el-option>
                                        </el-select>
                                    </div>
                                    
                                    <el-table :data="consumptionData" stripe style="width: 100%">
                                        <el-table-column prop="date" label="日期" width="180"></el-table-column>
                                        <el-table-column prop="type" label="消费类型"></el-table-column>
                                        <el-table-column prop="tokens" label="Token数量"></el-table-column>
                                        <el-table-column prop="status" label="状态">
                                            <template #default="scope">
                                                <el-tag
                                                    :type="scope.row.status === '成功' ? 'success' : 'danger'"
                                                    size="small"
                                                >
                                                    {{ scope.row.status }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    
                                    <div class="mt-4 flex justify-between items-center">
                                        <div class="text-sm text-gray-500">
                                            共 <span class="text-indigo-600">24</span> 条记录
                                        </div>
                                        <el-pagination
                                            layout="prev, pager, next"
                                            :total="50"
                                            :page-size="10"
                                        ></el-pagination>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        
                        <el-tab-pane label="使用记录" name="usage">
                            <div class="bg-white shadow-sm rounded-lg overflow-hidden p-6">
                                <div class="flex justify-between items-center mb-4">
                                    <h3 class="text-lg font-medium text-gray-900">降重记录</h3>
                                    <div class="flex space-x-2">
                                        <el-input
                                            placeholder="搜索记录"
                                            size="small"
                                            prefix-icon="el-icon-search"
                                        ></el-input>
                                        <el-select v-model="usageFilter" placeholder="筛选" size="small">
                                            <el-option label="全部记录" value="all"></el-option>
                                            <el-option label="最近7天" value="recent"></el-option>
                                            <el-option label="长文本" value="long"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                                
                                <el-table :data="usageData" stripe style="width: 100%">
                                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                                    <el-table-column prop="title" label="文档标题"></el-table-column>
                                    <el-table-column prop="words" label="字数"></el-table-column>
                                    <el-table-column prop="reduction" label="降重率">
                                        <template #default="scope">
                                            <span class="text-green-600">{{ scope.row.reduction }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="tokens" label="消耗Token"></el-table-column>
                                    <el-table-column label="操作" width="120">
                                        <template #default="scope">
                                            <el-button
                                                type="text"
                                                size="small"
                                                @click="viewDetail(scope.row)"
                                            >
                                                查看
                                            </el-button>
                                            <el-button
                                                type="text"
                                                size="small"
                                                @click="reprocess(scope.row)"
                                            >
                                                再次处理
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                
                                <div class="mt-4 flex justify-between items-center">
                                    <div class="text-sm text-gray-500">
                                        共 <span class="text-indigo-600">18</span> 条记录
                                    </div>
                                    <el-pagination
                                        layout="prev, pager, next"
                                        :total="50"
                                        :page-size="10"
                                    ></el-pagination>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        
        const app = createApp({
            setup() {
                const timeRange = ref('30');
                const usageFilter = ref('all');
                
                // 示例数据 - Token消耗记录
                const consumptionData = ref([
                    {
                        date: '2023-06-01',
                        type: '论文降重',
                        tokens: '250',
                        status: '成功'
                    },
                    {
                        date: '2023-05-28',
                        type: '论文降重',
                        tokens: '525',
                        status: '成功'
                    },
                    {
                        date: '2023-05-25',
                        type: '论文降重',
                        tokens: '320',
                        status: '成功'
                    },
                    {
                        date: '2023-05-22',
                        type: '充值赠送',
                        tokens: '+1000',
                        status: '成功'
                    },
                    {
                        date: '2023-05-20',
                        type: '购买套餐',
                        tokens: '+5000',
                        status: '成功'
                    }
                ]);
                
                // 示例数据 - 使用记录
                const usageData = ref([
                    {
                        date: '2023-06-01',
                        title: '毕业论文第三章',
                        words: '2500',
                        reduction: '68%',
                        tokens: '250'
                    },
                    {
                        date: '2023-05-28',
                        title: '文献综述',
                        words: '5200',
                        reduction: '72%',
                        tokens: '525'
                    },
                    {
                        date: '2023-05-25',
                        title: '实验设计与分析',
                        words: '3200',
                        reduction: '65%',
                        tokens: '320'
                    },
                    {
                        date: '2023-05-20',
                        title: '研究方法',
                        words: '1750',
                        reduction: '70%',
                        tokens: '175'
                    },
                    {
                        date: '2023-05-15',
                        title: '课题研究背景',
                        words: '2800',
                        reduction: '75%',
                        tokens: '280'
                    }
                ]);
                
                // 查看详情方法
                const viewDetail = (row) => {
                    console.log('查看详情', row);
                };
                
                // 再次处理方法
                const reprocess = (row) => {
                    console.log('再次处理', row);
                };
                
                // 初始化图表
                onMounted(() => {
                    const chartDom = document.getElementById('tokenChart');
                    const myChart = echarts.init(chartDom);
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['5/3', '5/6', '5/9', '5/12', '5/15', '5/18', '5/21', '5/24', '5/27', '5/30', '6/2'],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'Token消耗',
                                type: 'bar',
                                barWidth: '60%',
                                data: [120, 200, 150, 80, 70, 110, 130, 180, 145, 250, 210],
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#3b82f6' },
                                        { offset: 1, color: '#8b5cf6' }
                                    ])
                                }
                            }
                        ]
                    };
                    
                    myChart.setOption(option);
                    
                    // 响应窗口大小变化
                    window.addEventListener('resize', () => {
                        myChart.resize();
                    });
                });
                
                return {
                    timeRange,
                    usageFilter,
                    consumptionData,
                    usageData,
                    viewDetail,
                    reprocess
                };
            }
        });
        
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 